﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.AlertsModel
@{
    ViewData["Title"] = "Alerts";
}

@section styles {
    <abp-style-bundle>
        <abp-style src="/css/demo.css" />
    </abp-style-bundle>
}

@section scripts {
    <abp-script-bundle>
        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
            <abp-script src="/Pages/Components/highlightCode.js" />*@
    </abp-script-bundle>
}

<link rel="stylesheet"
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<h2>Alerts</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/alerts/" target="_blank"> Bootstrap Alert</a>.</p>

<h4>Examples</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-alert alert-type="Primary">
            A simple primary alert—check it out!
        </abp-alert>
        <abp-alert alert-type="Secondary">
            A simple secondary  alert—check it out!
        </abp-alert>
        <abp-alert alert-type="Success">
            A simple success  alert—check it out!
        </abp-alert>
        <abp-alert alert-type="Danger">
            A simple danger  alert—check it out!
        </abp-alert>
        <abp-alert alert-type="Warning">
            A simple warning  alert—check it out!
        </abp-alert>
        <abp-alert alert-type="Info">
            A simple info  alert—check it out!
        </abp-alert>
        <abp-alert alert-type="Light">
            A simple light  alert—check it out!
        </abp-alert>
        <abp-alert alert-type="Dark">
            A simple dark  alert—check it out!
        </abp-alert>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-alert alert-type=&quot;Primary&quot;&gt;
    A simple primary alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Secondary&quot;&gt;
    A simple secondary  alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Success&quot;&gt;
    A simple success  alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Danger&quot;&gt;
    A simple danger  alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Warning&quot;&gt;
    A simple warning  alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Info&quot;&gt;
    A simple info  alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Light&quot;&gt;
    A simple light  alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Dark&quot;&gt;
    A simple dark  alert&mdash;check it out!
&lt;/abp-alert&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
    A simple primary alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-secondary&quot; role=&quot;alert&quot;&gt;
    A simple secondary alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
    A simple success alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
    A simple danger alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
    A simple warning alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
    A simple info alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-light&quot; role=&quot;alert&quot;&gt;
    A simple light alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-dark&quot; role=&quot;alert&quot;&gt;
    A simple dark alert&mdash;check it out!
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Link color</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-alert alert-type="Primary">
            A simple primary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
        </abp-alert>
        <abp-alert alert-type="Secondary">
            A simple secondary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
        </abp-alert>
        <abp-alert alert-type="Success">
            A simple success alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
        </abp-alert>
        <abp-alert alert-type="Danger">
            A simple danger alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
        </abp-alert>
        <abp-alert alert-type="Warning">
            A simple warning alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
        </abp-alert>
        <abp-alert alert-type="Info">
            A simple info alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
        </abp-alert>
        <abp-alert alert-type="Light">
            A simple light alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
        </abp-alert>
        <abp-alert alert-type="Dark">
            A simple dark alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
        </abp-alert>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-alert alert-type=&quot;Primary&quot;&gt;
    A simple primary alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Secondary&quot;&gt;
    A simple secondary alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Success&quot;&gt;
    A simple success alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Danger&quot;&gt;
    A simple danger alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Warning&quot;&gt;
    A simple warning alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Info&quot;&gt;
    A simple info alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Light&quot;&gt;
    A simple light alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Dark&quot;&gt;
    A simple dark alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
    A simple primary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-secondary&quot; role=&quot;alert&quot;&gt;
    A simple secondary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
    A simple success alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
    A simple danger alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
    A simple warning alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
    A simple info alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-light&quot; role=&quot;alert&quot;&gt;
    A simple light alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-dark&quot; role=&quot;alert&quot;&gt;
    A simple dark alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Additional content</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-alert alert-type="Success">
            <h4>Well done!</h4>
            <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
            <hr>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </abp-alert>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-alert alert-type=&quot;Success&quot;&gt;
    &lt;h4&gt;Well done!&lt;/h4&gt;
    &lt;p&gt;Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.&lt;/p&gt;
    &lt;hr&gt;
    &lt;p class=&quot;mb-0&quot;&gt;Whenever you need to, be sure to use margin utilities to keep things nice and tidy.&lt;/p&gt;
&lt;/abp-alert&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
    &lt;h4 class=&quot;alert-heading&quot;&gt;Well done!&lt;/h4&gt;
    &lt;p&gt;Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.&lt;/p&gt;
    &lt;hr&gt;
    &lt;p class=&quot;mb-0&quot;&gt;Whenever you need to, be sure to use margin utilities to keep things nice and tidy.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Dismissing</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-alert alert-type="Warning" dismissible="true">
            Holy guacamole! You should check in on some of those fields below.
        </abp-alert>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-alert alert-type=&quot;Warning&quot; dismissible=&quot;true&quot;&gt;
    Holy guacamole! You should check in on some of those fields below.
&lt;/abp-alert&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;alert alert-warning alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
  Holy guacamole! You should check in on some of those fields below.
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
    &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
  &lt;/button&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>